<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        strong{
            color: #ff6699;
        }
    </style>
</head>

<body>
    <pre id="pre" style="font-size: 14px;"></pre>
    <script>
        // //第一题
        // //  在 javascript 里面是否支持多继承,如果支持,写一个示例,如果不支持是否有替代访问可以达到多继承的效果？
        // class Animal {
        //     run() {
        //         console.log("animal run");
        //     }
        // }

        // class Person {
        //     constructor(name, age) {
        //         this.username = name;
        //         this.age = age;
        //         this._salary = 2000;
        //     }

        //     say() {
        //         console.log(`${this.username} say hello`);
        //     }
        // }

        // /* 编写一个 Man 类,可以继承到 Animal 类的 run 方法和Person类的 属性和方法？ 该如何实现 */
        // class Man {
        //     constructor(name, age) {
        //         this.init(name, age);
        //         Reflect.deleteProperty(this,"init");
        //         Reflect.deleteProperty(this,"extends");
        //     }
        //     init(name, age) {
        //         let _myAll = {};
        //         for (let value of Reflect.ownKeys(this.__proto__)) {
        //             _myAll[value] = this.__proto__[value];
        //         };
        //         this.extends({
        //             animal: new Animal(),
        //             person: new Person(name, age),
        //             own: _myAll
        //         });
        //     }
        //     extends(options) {
        //         for (let key in options) {
        //             for (let atrr in options[key]) {
        //                 if (atrr == "constructor") continue;
        //                 this[atrr] = options[key][atrr];
        //             }
        //             if (key === "own") continue;
        //             for (let value of Reflect.ownKeys(options[key].__proto__)) {
        //                 if (value == "constructor") continue;
        //                 this.__proto__[value] = options[key].__proto__[value];
        //             }
        //         }
        //     }
        //     say() {
        //         console.log("ss");
        //     }
        // }
        // let man = new Man('白猫', "4");
        // console.log(man);
        // man.say();
        // man.run();
        
        // class Animal {
        //     run() {
        //         console.log("animal run");
        //     }
        // }

        // class Person extends Animal {
        //     constructor(name, age) {
        //         super();
        //         this.username = name;
        //         this.age = age;
        //         this._salary = 2000;
        //     }

        //     say() {
        //         console.log(`${this.username} say hello`);
        //     }
        // }
        // class Man extends Person{
        //     constructor(name,age){
        //         super(name,age);
        //     }
        // }
        // let man = new Man("白猫","4");
        // console.log(man);
        /* 
        # es6 新特性
        ![](.02-总结出es6里面的至少5个新特性_images/1ec8d378.png)
        1.新的声明方式,使用let和const替代var
        let有块级作用域,一个{}代表一个块级,const是声明一个不可修改的变量,声明时必须初始化

        2.扩展运算符,[...arr],可以将浅拷贝一个数组,也可以合并数组[...arr1,"ss",...arr2];

        3.新的数据结构set和map,其中set可以用来数组去重,具体为[...new Set(arr)],map相比以前的对象,它的key值不再局限于string型,map的key值可以是一个复杂的引用数据类型
        
        4.变量的解构赋值,例如{school:{name}} = data;从data对象中取出school对象中的name属性；

        5.Proxy 代理,让每次对对象的属性操作都触发中间函数get或set,用来拦截或者处理对应逻辑
        6.Symbol,唯一值,但Symbol.for()可以定义相同的
        7.for of 遍历数组,以及迭代器Iterator,只要有迭代属性Symbol(Symbol.iterator)都能用for of遍历
         */
        document.getElementById("pre").innerHTML = `
        <h2>第一题：</h2>
        <code>
        class Animal {
            run() {
                console.log("animal run");
            }
        }

        class Person <strong>extends</strong> Animal {
            constructor(name, age) {
                <strong>super();</strong>
                this.username = name;
                this.age = age;
                this._salary = 2000;
            }

            say() {
                console.log(\`\${this.username} say hello\`);
            }
        }
        class Man <strong>extends Person</strong>{
            constructor(name,age){
                super(name,age);
            }
        }
        let man = new Man("白猫","4");
        console.log(man);
        </code>
        /* 
        
        <h2>第二题：</h2>
        <b># es6 新特性</b>
        
        ![](.02-总结出es6里面的至少5个新特性_images/1ec8d378.png)
        <b>1</b>.新的声明方式,使用let和const替代var
            let有块级作用域,一个{}代表一个块级,const是声明一个不可修改的变量,声明时必须初始化,let同一个块级内不允许重复声明变量

        <b>2</b>.扩展运算符,[...arr],可以将浅拷贝一个数组,也可以合并数组[...arr1,"ss",...arr2];

        <b>3</b>.新的数据结构set和map,其中set可以用来数组去重,具体为[...new Set(arr)],创建的new Set是一个类数组,可以使用迭代器进行遍历
            map相比以前的对象,它的key值不再局限于string型,map的key值可以是一个复杂的引用数据类型
        
        <b>4</b>.变量的解构赋值,例如{school:{name}} = data;从data对象中取出school对象中的name属性;

        <b>5</b>.Proxy 代理,让每次对对象的属性操作都触发中间函数get或set,用来拦截或者处理对应逻辑
        <b>6</b>.Symbol,唯一值,但Symbol.for()可以定义相同的,普通的遍历手段无法遍历到Symbol作为key值的对象属性值,如果要拿出该值需要使用迭代器或者使用Reflect对象
        <b>7</b>.for of 遍历数组,以及迭代器Iterator,只要有迭代属性Symbol(Symbol.iterator)都能用for of遍历
        <b>8</b>.函数的扩展
            es6可以给函数的形参设定默认值,同时支持解构赋值的方式传递参数,设置默认值时,会形成暂时的作用域,在此时可以调用赋值
            另外,es6引入了rest参数,在函数接收剩余参数,使用形式为（形式为...变量名）
            箭头函数,es6新引入箭头函数,简化函数的写法,同时箭头函数的this指向上一级this,方便传值,
            比如点击事件内,在定时器中使用箭头函数,不同再在外面保存this,直接在箭头函数里使用this,一样可以指向当前点击节点
        <b>9</b>.Reflect对象,用来操控对象,比如取出对象的key,Reflect.ownKeys(target)
        <b>10</b>.class类,在继承上使用extends可以继承父类的属性和方法,在构造函数内要先super执行
         */
        `;
        let col = new Map();
        col.set(Symbol("po"),"xsw");
        col[Symbol("xs")] = "qq";
        col["s"] = "xs"
        console.log(col);
        for (let key of col) {
            console.log(key,"11");
        }
        console.log(Reflect.ownKeys(col));
    </script>
</body>

</html>